<template>
  <div
    id="jay-desktop-main"
    class="jay-desktop-main"
    @drop="onDrop"
    @dragover="onDragover"
    @click="onClick"
    @dblclick="onDbClick"
    @mousedown="onMousedown"
    @contextmenu.prevent.stop="onContextMenu"
  >
    <app-item
      v-for="(item,index) in appsList"
      :key="index"
      :left="posLeft(index)"
      :top="posTop(index)"
      :icon="item.icon"
      :label="item.label"
      :id="item.id"
    />
    <context-menu :left="contextMenu.left" :top="contextMenu.top" v-if="contextMenu.show"/>
  </div>

</template>

<script>
  import AppItem from '../DeskAppItem/index.vue'
  import ContextMenu from '../DeskContextMenu/index.vue'
  import AppWallpaper from '@/components/App/Wallpaper/index.vue'
  import AppMdEditor from '@/components/App/MdEditor/index.vue'
  import AppWrapper from '@/components/App/AppWrapper/index.vue'
  import {mapState} from 'vuex'
  export default {
    name: "DesktopMain",
    components:{
      AppItem,
      ContextMenu,
      AppWallpaper,
      AppWrapper,
      AppMdEditor
    },
    computed:{
      ...mapState('app',{
        appsList: state => state.appsList
      })
    },
    data(){
      return{
        contextMenu:{
          show:false,
          left:0,
          top:0
        },

      }
    },
    methods:{
      onDrop(event){
        event.preventDefault()
        console.log("event",event)
        event.preventDefault()
        console.log("拖放完毕，放置")
        let posX,posY,flagX,flagY;
        flagX=Math.floor(event.clientX/81);//81=76+5
        if(flagX<1)
        {
          posX=5;
        }
        else{
          posX=flagX*76+(flagX+1)*5;
          if(posX>=1787)
            posX=1787;
        }

        flagY=Math.floor(event.clientY/99);//99=89+10
        if(flagY<1)
        {
          posY=10;
        }
        else{
          posY=flagY*89+(flagY+1)*10
          if(posY>=901)
            posY=901;
        }
        let id = event.dataTransfer.getData("text");
        let el= document.getElementById(id)
        el.style.left = posX + "px";
        el.style.top = posY + "px";
      },
      onDragover(event){
        event.preventDefault()
        console.log("正在拖放")
      },
      onClick(e){
        console.log("桌面点击",e)
      },
      onDbClick(e){
        this.$store.commit('app/LAUNCH_APP',e.target.id)
        console.log("桌面双击",e)
      },
      onContextMenu(e){
        console.log("桌面右键点击",e)
        if(e.target.id === 'jay-desktop-main'){
          this.contextMenu.left = e.clientX
          this.contextMenu.top = e.clientY
          this.contextMenu.show = true
        }
      },
      onMousedown(){
        this.hiddenContextMenu()
      },
      posLeft(index){
        console.log(index)
        let count=Math.floor(index/10)
        return count*76 + (count+1) *5
      },
      posTop(index){
        let count=index%10
        return count*89 + (count+1) *10
      },
      hiddenContextMenu(){
        this.contextMenu.show = false
      }
    },
    mounted() {

    }
  }
</script>

<style lang="scss">
  .jay-desktop-main{
    height: 100%;
    position: relative;
  }
</style>